﻿<!--
> Muaz Khan       - wwww.MuazKhan.com
> MIT License     - www.WebRTC-Experiment.com/licence
> Experiments     - github.com/muaz-khan/WebRTC-Experiment
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>MediaStreamTrack.getSources » ۠getAllUserMedias | Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
        
        <style>
            audio, video {
                -moz-transition: all 1s ease;
                -ms-transition: all 1s ease;
                
                -o-transition: all 1s ease;
                -webkit-transition: all 1s ease;
                transition: all 1s ease;
                vertical-align: top;
            }

            input {
                border: 1px solid #d9d9d9;
                border-radius: 1px;
                font-size: 2em;
                margin: .2em;
                width: 30%;
            }

            .setup {
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
                font-size: 102%;
                height: 47px;
                margin-left: -9px;
                margin-top: 8px;
                position: absolute;
            }

            p { padding: 1em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }
        </style>
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>

        <script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script>
    </head>

    <body>
        <article>
            <header style="text-align: center;">
                <h1>
                    MediaStreamTrack.getSources » ۠getAllUserMedias
                </h1>            
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                    
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                    
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>

            <div class="github-stargazers"></div>

            <blockquote style="background: #f3b7b7;border: 5px solid black;border-radius: 5px;">
                There is a similar (up-to-dated) demo <span style="border: 1px dotted red; background: yellow; padding: 2px 5px;">"DetectRTC"</span> : <a href="https://www.webrtc-experiment.com/DetectRTC/">https://www.webrtc-experiment.com/DetectRTC/</a>
            </blockquote>
            
            <section class="experiment">
                <table id="output-table"></table>
                <video id="hidden-video" muted volume=0 style="display:none;"></video>
            </section>
<script>
if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
    // Firefox 38+, Microsoft Edge, and Chrome 44+ seems having support of enumerateDevices
    navigator.enumerateDevices = function(callback) {
        navigator.mediaDevices.enumerateDevices().then(callback);
    };
}

function getAllAudioVideoDevices(successCallback, failureCallback) {
    if (!navigator.enumerateDevices && window.MediaStreamTrack && window.MediaStreamTrack.getSources) {
        navigator.enumerateDevices = window.MediaStreamTrack.getSources.bind(window.MediaStreamTrack);
    }

    if (!navigator.enumerateDevices && navigator.mediaDevices.enumerateDevices) {
        navigator.enumerateDevices = navigator.mediaDevices.enumerateDevices.bind(navigator);
    }

    if (!navigator.enumerateDevices) {
        failureCallback(null, 'Neither navigator.mediaDevices.enumerateDevices NOR MediaStreamTrack.getSources are available.');
        return;
    }

    var allMdiaDevices = [];
    var allAudioDevices = [];
    var allVideoDevices = [];

    var audioInputDevices = [];
    var audioOutputDevices = [];
    var videoInputDevices = [];
    var videoOutputDevices = [];

    navigator.enumerateDevices(function(devices) {
        devices.forEach(function(_device) {
            var device = {};
            for (var d in _device) {
                device[d] = _device[d];
            }

            // make sure that we are not fetching duplicate devics
            var skip;
            allMdiaDevices.forEach(function(d) {
                if (d.id === device.id) {
                    skip = true;
                }
            });

            if (skip) {
                return;
            }

            // if it is MediaStreamTrack.getSources
            if (device.kind === 'audio') {
                device.kind = 'audioinput';
            }

            if (device.kind === 'video') {
                device.kind = 'videoinput';
            }

            if (!device.deviceId) {
                device.deviceId = device.id;
            }

            if (!device.id) {
                device.id = device.deviceId;
            }

            if (!device.label) {
                device.label = 'Please invoke getUserMedia once.';
            }

            if (device.kind === 'audioinput' || device.kind === 'audio') {
                audioInputDevices.push(device);
            }

            if (device.kind === 'audiooutput') {
                audioOutputDevices.push(device);
            }

            if (device.kind === 'videoinput' || device.kind === 'video') {
                videoInputDevices.push(device);
            }

            if (device.kind.indexOf('audio') !== -1) {
                allAudioDevices.push(device);
            }

            if (device.kind.indexOf('video') !== -1) {
                allVideoDevices.push(device);
            }

            // there is no 'videoouput' in the spec.
            // so videoOutputDevices will always be [empty]

            allMdiaDevices.push(device);
        });

        if (successCallback) {
            successCallback({
                allMdiaDevices: allMdiaDevices,
                allVideoDevices: allVideoDevices,
                allAudioDevices: allAudioDevices,
                videoInputDevices: videoInputDevices,
                audioInputDevices: audioInputDevices,
                audioOutputDevices: audioOutputDevices
            });
        }
    });
}

var outputTable = document.getElementById('output-table');
function showOutput(td1Text, td2Text) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>'+td1Text+'</td><td>'+td2Text+'</td>';
    outputTable.appendChild(tr);
}

function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
}

captureUserMedia({audio: true, video: true}, function(stream) {
    getAllAudioVideoDevices(function(result) {
        if (result.allMdiaDevices.length) {
            showOutput('Number of audio/video devices available:', result.allMdiaDevices.length);
        }

        if (result.allVideoDevices.length) {
            showOutput('Number of video devices available:', result.allVideoDevices.length);
        }

        if (result.allAudioDevices.length) {
            showOutput('Number of audio devices available:', result.allAudioDevices.length);
        }

        if (result.videoInputDevices.length) {
            showOutput('Number of video-input devices available:', result.videoInputDevices.length);
        }

        if (result.audioInputDevices.length) {
            showOutput('Number of audio-input devices available:', result.audioInputDevices.length);
        }

        if (result.audioOutputDevices.length) {
            showOutput('Number of audio-output devices available:', result.audioOutputDevices.length);
        }

        if (result.allMdiaDevices.length && result.allMdiaDevices[0].label === 'Please invoke getUserMedia once.') {
            showOutput('It seems you did not invoke navigator-getUserMedia before using these API.', 'warning');
        }

        var text = '<h2>All audio input devices:</h2><br><ol>';
        result.audioInputDevices.forEach(function(device) {
            text += '<li>'+ device.label + ' (Kind: ' + device.kind +')</li>';
        });
        text += '</ol>';
        showOutput(text, 'audio-input');

        text = '<h2>All audio output devices:</h2><br><ol>';
        result.audioOutputDevices.forEach(function(device) {
            text += '<li>'+ device.label + ' (Kind: ' + device.kind +')</li>';
        });
        text += '</ol>';
        showOutput(text, 'audio-output');

        text = '<h2>All video input devices:</h2><br><ol>';
        result.videoInputDevices.forEach(function(device) {
            text += '<li>'+ device.label + ' (Kind: ' + device.kind +')</li>';
        });
        text += '</ol>';
        showOutput(text, 'video-input');
    }, function(error) {
        alert(error);
    });

    document.getElementById('hidden-video').srcObject = stream;

    stream.getVideoTracks().forEach(function(track) {
        track.stop();
    });

    stream.getAudioTracks().forEach(function(track) {
        track.stop();
    });
}, function(error){
    alert(JSON.stringify(error));
});
</script>

            <section class="experiment">
                <h2>How to use in your own webpages?</h2>
                <p>
                    Please check this Stackoverflow answer: <a href="http://stackoverflow.com/a/20087996/552182" target="_blank">http://stackoverflow.com/a/20087996/552182</a> 
                </p>
            </section>
            
            <section class="experiment own-widgets latest-commits">
                <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
                <div id="github-commits"></div>
            </section>
        
            <section class="experiment">
                <h2 class="header" id="feedback">Feedback</h2>
                <div>
                    <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
            </section>
        </article>
        
        <a href="https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/MediaStreamTrack.getSources.html" class="fork-left"></a>
        
        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
                © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
                <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            </p>
        </footer>
    
        <!-- commits.js is useless for you! -->
        <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>
    </body>
</html>
